<template>
  <div class="dict-data-page">

        <!-- 搜索表单 -->
        <el-form :model="table.where" class="ele-form-search ele-table-tool-default" size="small"
                @keyup.enter.native="$refs.table.reload()"
                @submit.native.prevent>
            <el-row :gutter="15">
                <el-col :md="6" :sm="12">
                    <el-form-item>
                        <el-input v-model="table.where.name" placeholder="请输入字设备名称查询" clearable size="small"/>
                    </el-form-item>
                </el-col>
                <el-col :md="6" :sm="12">
                    <el-form-item>
                        <el-input v-model="table.where.device_id" placeholder="请输入设备序列号查询" clearable size="small"/>
                    </el-form-item>
                </el-col>
                <el-col :md="12" :sm="12">
                    <div class="ele-form-actions">
                        <el-button 
                            type="primary" 
                            @click="$refs.table.reload()" 
                            icon="el-icon-search" 
                            class="ele-btn-icon"
                            size="small">查询
                        </el-button>
                        <el-button 
                            @click="showEdit=true" 
                            type="primary" 
                            icon="el-icon-plus" 
                            class="ele-btn-icon" 
                            size="small">添加设备
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 数据表格 -->
        <ele-data-table ref="table" :config="table" :choose.sync="choose" :height="tbHeight" highlight-current-row>
            <el-table-column prop="name" label="设备名称" sortable="custom" show-overflow-tooltip min-width="60px"/>
            <el-table-column prop="device_id" label="序列号" sortable="custom" show-overflow-tooltip min-width="50px"/>
            <el-table-column prop="device_uuid" label="UUID" sortable="custom"/>
            <el-table-column prop="ip" label="设备IP" sortable="custom"/>

            <el-table-column label="创建时间" sortable="custom" show-overflow-tooltip>
                <template slot-scope="{row}">{{ row.create_time }}</template>
            </el-table-column>

            <el-table-column prop="online" label="在线" width="70px">
                <template slot-scope="{row}">
                    <el-tag :type="['default', 'success'][row.online]" :ripple="row.online===0">
                        {{ ['离线', '在线'][row.online] }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="core_version" label="软件版本" sortable="custom" show-overflow-tooltip/>

            <el-table-column label="操作" align="center" width="200px" :resizable="false" fixed="right">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.online==0" @click="sensitize(scope.row)" type="primary" size="mini" class="smbtn">激活</el-button>
                    <el-button @click="edit(scope.row)" type="warning" size="mini" class="smbtn">修改</el-button>
                    <el-button @click="remove(scope.row)" type="danger" size="mini" class="smbtn">删除</el-button>
                    <el-dropdown size="mini" split-button type="info" class="smbtn" @command="handleCommand">
                        更多
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row, 'synctime')" icon="el-icon-watch">时间同步</el-dropdown-item>
                            <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row, 'resetface')" icon="el-icon-delete">清空人脸重新推送</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.online==1" :command="beforeHandleCommand(scope.$index, scope.row, 'opendoor')" icon="el-icon-delete">开门</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>

        </ele-data-table>

        <!-- 编辑弹窗 -->
        <el-dialog :title="editForm.id ? '修改设备' : '添加设备'" :visible.sync="showEdit" width="600px"
                :destroy-on-close="true" :lock-scroll="false" :close-on-click-modal="false">

           <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="96px">
                <el-row :gutter="15">
                    <el-col :md="12">
                        <el-form-item label="设备名称:" prop="name">
                            <el-input v-model="editForm.name" placeholder="请输入设备名称" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12">
                        <el-form-item label="功能分类:" prop="funtype">
                            <el-select v-model="editForm.funtype" placeholder="请选择功能分类" clearable class="ele-fluid">
                                <el-option
                                    v-for="item in funtypes"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="15">
                    <el-col :md="12">
                        <el-form-item label="设备序列号:" prop="device_id">
                            <el-input v-model="editForm.device_id" placeholder="请输入设备序列号" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12">
                        <el-form-item label="设备UUID:" prop="device_uuid">
                            <el-input v-model="editForm.device_uuid" placeholder="请输入设备UUID" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="15">
                    <el-col :md="12">
                        <el-form-item label="排序号:">
                            <el-input-number v-model="editForm.sort" controls-position="right" :min="0" placeholder="请输入排序号" class="ele-fluid ele-text-left"/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12">
                        <el-form-item label="地理位置:">
                            <el-input v-model="editForm.positions" placeholder="请输入地理位置" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="15">
                    <el-col :md="12">
                        <el-form-item label="设备账号:" prop="deviceuser">
                            <el-input v-model="editForm.deviceuser" placeholder="请输入设备账号" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12">
                        <el-form-item label="设备密码:" prop="devicepwd">
                            <el-input v-model="editForm.devicepwd" placeholder="请输入设备密码" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="15">
                    <el-col :md="24">
                         <el-form-item label="备注:">
                            <el-input v-model="editForm.remark" placeholder="请输入备注" :rows="4" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer">
                <el-button @click="showEdit=false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "DeviceData",

    props: {
        groupId: Number,  // 设备分组id
        tbHeight: String  // 表格高度
    },

    data() {
        return {
            table: {url: '/api/admin/device/device/index', where: {group_id: this.groupId}, page: true},  // 表格配置
            choose: [],  // 表格选中数据
            showEdit: false,  // 是否显示表单弹窗
            editForm: {group_id: this.groupId},  // 表单数据
            funtypes: [
                { id: 1, name: '进' },
                { id: 2, name: '出' },
            ],
            editRules: {  // 表单验证规则
                name: [
                    {required: true, message: '请输入设备名称', trigger: 'blur'}
                ],
                funtype: [
                    {required: true, message: '请选择功能分类', trigger: 'change'}
                ],
                device_uuid: [
                    {required: true, message: '请输入设备UUID', trigger: 'blur'}
                ],
                device_id: [
                    {required: true, message: '请输入设备序列号', trigger: 'blur'}
                ],
                deviceuser: [
                    {required: true, message: '请输入设备账号', trigger: 'blur'}
                ],
                devicepwd: [
                    {required: true, message: '请输入设备密码', trigger: 'blur'}
                ],
            }
        }
    },

    methods: {

        edit(row) {
            this.editForm = Object.assign({}, row);
            this.showEdit = true;
        },

        save() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({lock: true});
                    this.$http.post('/api/admin/device/device/store', this.editForm).then(res => {
                        loading.close();
                        if (res.data.code === 0) {
                            this.showEdit = false;
                            this.$message({type: 'success', message: res.data.msg});
                            this.$refs.table.reload();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(e => {
                        loading.close();
                        this.$message.error(e.message);
                    });
                } else {
                    return false;
                }
            });
        },

        remove(row) {
            this.$confirm('确定要删除该设备吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/admin/device/device/delete?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        sensitize(row) {
            this.$confirm('确定要激活该设备吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/admin/device/device/sensitize?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        beforeHandleCommand(index, row, command) {
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },

        handleCommand(command) {
            switch (command.command) {
                case "synctime":
                    this.synctime(command.index, command.row);
                    break;

                case "resetface":
                    this.resetface(command.index, command.row);
                    break;

                case "opendoor":
                    this.opendoor(command.index, command.row);
                    break;
            }
        },

        synctime(index, row) {
            this.$confirm('确定同步平台时间到设备吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/admin/device/device/synctime?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        resetface(index, row) {
            this.$confirm('确定要清空设备人脸并重新推送吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/admin/device/device/resetface?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        opendoor(index, row) {
            this.$confirm('确定要开门吗?', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/admin/device/device/opendoor?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        }
    },

    watch: {
        /* 监听变化 */
        groupId() {
            this.editForm.group_id = this.groupId;
            this.table.where = {group_id: this.groupId};
            this.$refs.table.reload();
        }
    }
}
</script>

<style scoped>
.smbtn {
    padding: 5px;
}
 .el-row {
    margin-bottom: 20px;
}
</style>